<template>
  <div
    class="my-switch"
    role="switch"
    :class="['my-switch--'+size,{'checked':value,disabled,}]"
    :style="{backgroundColor}"
    @click="handleClick"
  >
    <div class="my-switch__button"></div>
  </div>
</template>

<script>
export default {
  name: "MySwitch",
  props: {
    value: Boolean,
    disabled: Boolean,
    size: {
      type: String,
      default: "md",
    },
    checkedColor: {
      type: String,
      default: "#00b2ff",
    },
    uncheckedColor: {
      type: String,
      default: "#e6e9ec",
    },
  },
  computed: {
    backgroundColor() {
      return this.value ? this.checkedColor : this.uncheckedColor;
    },
  },
  methods: {
    handleClick() {
      if (this.disabled) return;
      this.$emit("input", !this.value);
      this.$emit("change", !this.value);
    },
  },
};
</script>

<style lang="scss">
.my-switch {
  display: inline-block;
  width: 40px;
  height: 22px;
  background-color: #e6e9ec;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .my-switch__button {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: left;
  }

  &.my-switch--lg {
    width: 52px;
    height: 28px;
    .my-switch__button {
      width: 24px;
      height: 24px;
    }
    &.checked {
      .my-switch__button {
         left: 26px;
      }
    }
  }

  &.my-switch--sm {
    width: 32px;
    height: 18px;
    .my-switch__button {
      width: 14px;
      height: 14px;
    }
    &.checked {
      .my-switch__button {
         left: 16px;
      }
    }
  }

  &.checked {
    background-color: #00b2ff;
    .my-switch__button {
      left: 20px;
    }
  }

  &.disabled {
    cursor: not-allowed;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba($color: #ffffff, $alpha: 0.3);
    }
  }
}
</style>